<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>请假申请</title>
    <link rel="stylesheet" href="./index.css" />
    <style>
      #applicationDetails {
        height: 100%;
        background-color: #f5f5f5;
      }
      .fxjs {
        display: flex;
        justify-content: space-between;
      }
      .t1 {
        font-family: Roboto, Roboto;
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        line-height: 24px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        min-width: 80px;
      }
      .t2 {
        font-family: Roboto, Roboto;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        line-height: 24px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
      .t3 {
        font-family: Roboto, Roboto;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        line-height: 24px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
      .t4 {
        font-family: Roboto, Roboto;
        font-weight: 500;
        font-size: 12px;
        color: #999999;
        line-height: 24px;
        font-style: normal;
        text-transform: none;
      }
      .t5 {
        font-family: Roboto, Roboto;
        font-weight: 500;
        font-size: 14px;
        color: #000000;
        line-height: 24px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
      .bt {
        width: 75px;
        height: 40px;
        border-radius: 8px 8px 8px 8px;
      }
      .yuan {
        display: inline-block;
        width: 8px;
        height: 8px;
        background: #000;
        border-radius: 50%;
        margin-top: 2px;
      }

      /* 新增样式 */
      .header-section {
        padding: 20px;
        background: #fff;
      }
      .content-container {
        padding: 10px 16px;
      }
      .info-card {
        padding: 10px;
        background: #fff;
      }
      .blue-dot {
        display: inline-block;
        width: 10px;
        height: 10px;
        background: #089cff;
        border-radius: 50%;
        margin-top: 2px;
      }
      .info-row {
        padding: 2px 10px;
      }
      .approval-item {
        display: flex;
        width: 100%;
        margin-bottom: 10px;
      }
      .avatar-img {
        width: 50px;
        height: 50px;
      }
      .avatar-container {
        margin-right: 12px;
      }
      .textarea-bg {
        background: #f8f8f8;
      }
      .bottom-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 15px 0;
        background-color: white;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        z-index: 1000;
      }
      .bottom-functions {
        display: flex;
        gap: 20px;
        border-bottom: 1px solid #000;
        padding: 0 16px;
        padding-bottom: 12px;
        margin-bottom: 10px;
      }
      .function-icon {
        text-align: center;
      }
      .function-icon img {
        width: 30px;
        height: 30px;
      }
      .function-text {
        font-size: 12px;
        color: #999999;
      }
      .more-button {
        border: 1px dashed #000;
        height: 22px;
      }
      .buttons-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;
      }
      .btn-return {
        width: 75px;
        height: 40px;
        border-radius: 8px 8px 8px 8px;
        border: 1px solid #566bf5;
        background: #fff;
        color: #566bf5;
      }
      .btn-approve {
        width: 75px;
        height: 40px;
        border-radius: 8px 8px 8px 8px;
        border: 1px solid #f04438;
        background: #fff;
        color: #f04438;
      }
      .btn-agree {
        width: 75px;
        height: 40px;
        border-radius: 8px 8px 8px 8px;
        border: 1px solid #f04438;
        background: #f04438;
        color: #fff;
      }
    </style>
  </head>

  <body>
    <div id="applicationDetails">
      <div>
        <van-nav-bar title="请假申请" left-arrow @click-left="onClickLeft" />
      </div>

      <div class="header-section">
        <div>{{title}}</div>
        <div>申请时间：{{applyTime}}</div>
      </div>
      <div class="content-container">
        <div class="info-card">
          <div><span class="blue-dot"></span>公务用车申请单</div>
          <div class="info-row">
            <div class="fxjs">
              <div class="t1">电子编号</div>
              <div class="t2">YC202011130002</div>
            </div>
          </div>
          <div class="info-row">
            <div class="fxjs">
              <div class="t1">申请部门</div>
              <div class="t2">信息技术部</div>
            </div>
          </div>
          <div class="info-row">
            <div class="fxjs">
              <div class="t1">使用人</div>
              <div class="t2">超级管理员</div>
            </div>
          </div>
          <div class="info-row">
            <div class="fxjs">
              <div class="t1">填单日期</div>
              <div class="t2">2020年11月11日</div>
            </div>
          </div>
          <div class="info-row">
            <div class="fxjs">
              <div class="t1">用车事由</div>
              <div class="t2">撒打发 是胜多负少sdf<br />是的发送到</div>
            </div>
          </div>

          <div class="info-row">
            <div class="fxjs">
              <div class="t1">用车时间</div>
              <div class="t2">2020年11月03日13时</div>
            </div>
          </div>
          <div class="info-row">
            <div class="fxjs">
              <div class="t1">是否需要安排司机</div>
              <div class="t2">需要（ ）不需要（√）</div>
            </div>
          </div>
          <div class="info-row">
            <div class="fxjs">
              <div class="t1">同行人数</div>
              <div class="t2">3水电费水电费小弟弟发送到</div>
            </div>
          </div>
          <div class="info-row">
            <div class="fxjs">
              <div class="t1">申请部门负责人意见</div>
              <div class="t2">1111</div>
            </div>
          </div>
          <div class="info-row">
            <div class="fxjs">
              <div class="t1">办公室负责人意见</div>
              <div class="t2"></div>
            </div>
          </div>
          <div class="info-row">
            <div class="fxjs">
              <div class="t1">调度安排确认</div>
              <div class="t2">借用车辆号</div>
            </div>
          </div>
          <div class="info-row">
            <div class="fxjs">
              <div class="t1"></div>
              <div class="t2"></div>
            </div>
          </div>
          <div class="info-row">
            <div class="fxjs">
              <div class="t1"></div>
              <div class="t2"></div>
            </div>
          </div>
          <div class="info-row">
            <div class="fxjs">
              <div class="t1"></div>
              <div class="t2"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="content-container">
        <div class="info-card">
          <div><span class="blue-dot"></span>审批流程</div>
          <div style="padding: 10px">
            <div
              v-for="item in approvalData"
              :key="item.id"
              class="approval-item"
            >
              <div class="avatar-container">
                <img src="./mrtx.png" alt="" class="avatar-img" />
              </div>
              <div style="width: 100%">
                <div class="t3">{{item.name}}</div>
                <div class="fxjs">
                  <div class="t4">{{item.role}}</div>
                  <div class="t4">{{item.time}}</div>
                </div>
                <div v-if="item.content">
                  <van-field
                    readonly
                    v-model="item.content"
                    rows="1"
                    autosize
                    type="textarea"
                    class="textarea-bg"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="bottom-bar">
        <div class="bottom-functions">
          <div class="function-icon">
            <div>
              <img src="./xb.png" alt="" />
            </div>
            <div class="function-text">协办</div>
          </div>
          <div class="function-icon">
            <div>
              <img src="./cs.png" alt="" />
            </div>
            <div class="function-text">抄送</div>
          </div>
          <div class="function-icon">
            <div>
              <img src="./ck.png" alt="" />
            </div>
            <div class="function-text">查看流程</div>
          </div>
          <div class="function-icon">
            <div>
              <img src="./ys.png" alt="" />
            </div>
            <div class="function-text">延时</div>
          </div>
        </div>
        <div class="buttons-container">
          <div @click="onisAssignee">
            <div class="more-button">
              <span class="yuan"></span>
              <span class="yuan"></span>
              <span class="yuan"></span>
            </div>
            <div class="function-text">更多</div>
          </div>
          <div>
            <button class="btn-return">退回</button>
            <button class="btn-approve">审批</button>
            <button class="btn-agree">同意</button>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="./vue.min.js"></script>
  <script src="./vant.min.js"></script>
  <script>
    var applicationDetails = new Vue({
      el: "#applicationDetails",
      data() {
        return {
          title: "吴**申请的请假申请",
          applyTime: "2023-08-01 10:00:00",
          startTime: "2023-08-01 09:00:00",
          endTime: "2023-08-01 12:00:00",
          useDuration: "3小时",
          reason: "去公司会议",
          reverse: true,
          isAssignee: false,
          approvalData: [
            {
              id: 1,
              avatar:
                "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png", // 替换为实际头像路径
              name: "吴**",
              role: "申请人",
              time: "2025.07.10 15:30",
              content:
                "医网图后勤监控院医网图后勤监控院医网图后勤监控院医网图后勤监控院医网图后勤监控院医网图后勤监控院医网图后勤监控院医网图后勤监控院医网图后勤监控院",
              status: "pending",
              statusType: "",
              statusText: "待处理",
            },
            {
              id: 2,
              avatar:
                "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png", // 替换为实际头像路径
              name: "胡**",
              role: "地区负责人",
              time: "2025.07.10 16:30",
              content: "同意，做好记录",
              status: "approved",
              statusType: "success",
              statusText: "已同意",
            },
            {
              id: 3,
              avatar:
                "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
              name: "祝**",
              role: "财务",
              time: "2025.07.10 16:30",
              content: "",
              status: "rejected",
              statusType: "danger",
              statusText: "已拒绝",
            },
          ],
        };
      },
      computed: {},
      created() {},
      mounted() {},
      methods: {
        onClickLeft() {
          console.log("点击了返回");
          window.history.back();
        },
        onisAssignee() {
          this.isAssignee = !this.isAssignee;
        },
        onTeamwork() {
          console.log("点击了协办");
        },
        onCarbonCopy() {
          console.log("点击了抄送");
        },
        onCheckProcess() {
          console.log("点击了查看流程");
        },
        onReturn() {
          console.log("点击了退回");
        },
        onApprove() {
          console.log("点击了审批");
        },
        onAgree() {
          console.log("点击了同意");
        },
      },
    });
  </script>
</html>
